第一，將 Google Ad Manager 腳本添加到 head 標籤，加載GPT腳本：

<!-- app.html -->

<script
  async="async"
  src="https://www.googletagservices.com/tag/js/gpt.js">
</script>

<script type="text/javascript">
  window.googletag = window.googletag || {};
  window.googletag.cmd = window.googletag.cmd || [];
</script>

第二，創建 Google Ad Manager 組件以在您想要的任何地方重複使用
PS 確保切換頁面 廣告可以每次更新

<!-- components/Gpt.vue -->

<template>
  <div :id="id"></div>
</template>

Script：

<!-- components/Gpt.vue -->

export default {
    name: 'Gpt',
    props: {
      size: Array,
      path: String,
      id: String,
    },
    beforeCreate() {
      window.googletag.cmd.push(() => {
        window.googletag.destroySlots();
      });
    },
    mounted() {
      const { path, size, id } = this;
      window.googletag.cmd.push(() => {
        window.googletag
          .defineSlot(path, size, id)
          .addService(window.googletag.pubads());
        window.googletag.pubads().enableSingleRequest();
        window.googletag.enableServices();
        window.googletag.display(id);
      });
    },
  };

Props:

size: Array => 添加廣告版位的尺寸
path: String => 加入廣告的連結
id: String => 插入 Google Ad Manager 給的GoogleAdId

第三，將組件添加到需要顯示的頁面中

<!-- page/index.vue -->

<Gpt
  path="/21737763597/adunit-1"
  :size="[[300, 600], [300, 250], [336, 280]]"
  id="div-gpt-ad-yourGoogleAdId"
/>

Script：

<!-- page/index.vue -->

import Gpt from "~/components/Gpt";

export default {
  name: "App",
  components: {
    Gpt
  }
};